<template>
	<view class="withdrawal">
		<image class="withdrawalbg" src="../../static/theater/bg.png" mode=""></image>
		<view class="navBox">
			<view class="navBg">
				<view class="navBgLeft">
					<view style="display: flex;align-items: center">
						金币收益(币)
						<!-- <uni-icons type="right"></uni-icons> -->
					</view>
					<view class="navNum">
						{{userInfo.balance || 0}}
					</view>
				</view>
				<view class="navBgLeft">
					<view style="display: flex;align-items: center">
						现金收益(元)
						<!-- <uni-icons type="right"></uni-icons> -->
					</view>
					<view class="navNum">
						{{userInfo.money / 100 || 0}}
					</view>
				</view>
			</view>
		</view>
		<view class="record">
			<view class="recordt">
				<view class="recordtw" :class="{tagClass:tag === 0}" @click="tabclick(0)">金币记录</view>
				<view class="recordtw" :class="{tagClass:tag === 1}" @click="tabclick(1)">现金记录</view>
			</view>
			<view class="recordb">
				<view class="recordbk" v-for="(item,index) in list" :key="index">
					<view class="recordbkl">
						<view class="recordbklt">{{ item.changeReason }}</view>
						<view class="recordbklb">{{ $u.timeFormat(item.createTime, 'yyyy/mm/dd hh:MM:ss') }}</view>
					</view>
					<view class="recordbkr" v-if="tag === 0">
            {{item.type===0?'-':'+'}} {{item.changeNum}}
					</view>
          <view class="recordbkr" v-if="tag === 1">
            {{item.type===0?'-':'+'}} {{item.changeNum / 100}}元
          </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import {gotoPage} from "../../utils/common";
	import {Api} from "../../service/api";
	export default {
		data() {
			return {
				userInfo: {},
				tag: 0,
				list:[],
				pageObj: {
					pageSize: 9,
					pageNum: 0,
					status: 'loading'
				},
			}
		},
    async onShow() {
      this.userInfo = await this.getInfoMethod()
      this.getList()
    },
    onReachBottom() {
      this.getList()
    },
		methods: {
			...mapActions('userInfo', ['getInfoMethod']),
			gotoPage,
			tabclick(val){
        this.list = []
        this.pageObj.pageNum = 0
        this.pageObj.status = 'loading'
				this.tag = val
        this.getList()
			},
      getList(){
        if(this.pageObj.status === 'nomore') return
        this.pageObj.status = 'loading'
        if(this.tag === 0){
          Api.getMember({
            pageNo:  ++ this.pageObj.pageNum,
            pageSize: this.pageObj.pageSize,
          }).then(res=>{
            this.list = this.list.concat(res.data.list)
            if(this.list.length < res.data.total)  this.pageObj.status = 'loadmore'
            else this.pageObj.status = 'nomore'
          })
        }else {
          Api.getMoneyPage({
            pageNo:  ++ this.pageObj.pageNum,
            pageSize: this.pageObj.pageSize,
          }).then(res=>{
            this.list = this.list.concat(res.data.list)
            if(this.list.length < res.data.total)  this.pageObj.status = 'loadmore'
            else this.pageObj.status = 'nomore'
          })
        }
      },
		},

	}
</script>

<style lang="scss" scoped>
	.withdrawal {
		background-color: #F1F7FC;
		height: 100vh;
		position: relative;

		.withdrawalbg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.navBox {
			// margin-top: 10rpx;
			width: calc(100% - 40rpx);
			height: 162rpx;
			color: #FFFFFF;
			border-radius: 28rpx;
			padding: 6rpx 18rpx;
			text-align: right;
			position: relative;
			// background-color: #FFFFFF;
			// margin-bottom: 20rpx;
			display: flex;
			// background-size: 100% 100%;
			// background-image: url("../../../static/theater/indexNavBg.png");
			// background-repeat: no-repeat;

			.navBg {
				width: 100%;
				// color: #2A2A2A;
				text-align: left;
				font-size: 24rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				float: left;
				position: relative;

				&::after {
					content: '';
					width: 2rpx;
					height: 22rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					background-color: #ABABAB;
				}

				.navBgLeft {
					display: flex;
					flex-direction: column;
					justify-content: center;

					.navNum {
						font-size: 40rpx;
						font-weight: 700;
					}
				}
			}
		}
		.record{
			background-color: #FFFFFF;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			padding: 0 32rpx 50rpx;
			overflow: hidden;
			width: calc(100% - 68rpx);
			position: relative;
      min-height: 84vh;


			.recordt{
				padding-top: 32rpx;
				display: flex;
				justify-content: space-around;
				font-size: 32rpx;
				font-weight: 700;
				color: #8C8C8C;
				.recordtw{
					height: 50rpx;
				}
				.tagClass{
					color: #333333;
					position: relative;
					image{
						width: 94rpx;
						height: 38rpx;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
			}
			.recordb{
				margin-top: 42rpx;
				.recordbk{
					background-color: #F3F4F4;
					display: flex;
					justify-content: space-between;
					padding: 16rpx;
					margin-bottom: 24rpx;
					border-radius: 12rpx;
					.recordbkl{
						.recordbklt{
							font-size: 28rpx;
							font-weight: 500;
							margin-bottom: 12rpx;
						}
						.recordbklb{
							font-size: 24rpx;
							font-weight: 500;
						}
					}
					.recordbkr{
						font-size: 28rpx;
						font-weight: 700;
						color: #E81F4B;
					}
				}
			}
		}
	}
</style>
